﻿
// event titles loaded
function tilesLoaded() {
    google.maps.event.clearListeners(map, 'tilesloaded');
    google.maps.event.addListener(map, 'zoom_changed', search);
    google.maps.event.addListener(map, 'dragend', search);
    search();
}

// event titles loaded
function tilesLoadForMyPlace() {
    google.maps.event.clearListeners(map, 'tilesloaded');   
}
// show select place  
function showSelectedPlace() {
    clearResults();
    clearMarkers();
    var place = autocomplete.getPlace();
    map.panTo(place.geometry.location);
    markers[0] = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    iw = new google.maps.InfoWindow({
      content: getIWContent(place,markers[0])
    });
    iw.open(map, markers[0]);
}
// search 
function search() {    
    // set bound search
    autocomplete.setBounds(map.getBounds());    
    var search = {
      bounds: map.getBounds()
    };      
    // search
    places.search(search, function(results, status) {
    // if PlacesServiceStatus = OK clear old result and add new results 
      if (status == google.maps.places.PlacesServiceStatus.OK) {      
        clearResults();
        clearMarkers();
        for (var i = 0; i < results.length; i++) {
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP
          });
          google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }
    })
  }
 // clear markers
  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      if (markers[i]) {
        markers[i].setMap(null);
        markers[i] == null;
      }
    }
  }  
  function dropMarker(i) {
    return function() {
      markers[i].setMap(map);
    }
  }
  
  function addResult(result, i) {
    var results = document.getElementById("results");
    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF');
    tr.onclick = function() {
      google.maps.event.trigger(markers[i], 'click');
    };
    
    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');
    icon.src = result.icon;
    icon.setAttribute("class", "placeIcon");
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results.appendChild(tr);
  }
  
  function clearResults() {
    var results = document.getElementById("results");
    while (results.childNodes[0]) {
      results.removeChild(results.childNodes[0]);
    }
  }
  
  function getDetails(result, i) {
    return function() {
      places.getDetails({
          reference: result.reference
      }, showInfoWindow(i));
    }
  }
  
  function showInfoWindow(i) {
    return function(place, status) {
      if (iw) {
        iw.close();
        iw = null;
      }
      
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        iw = new google.maps.InfoWindow({
          content: getIWContent(place,markers[i])
        });
        iw.open(map, markers[i]);        
      }
    }
  }
  
 function getIWContent(place,markers) {
//    var content = "";
//    content += '<table><tr><td>';
//    content += '<img class="placeIcon" src="' + place.icon + '"/></td>';
//    content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b>';
//    content += '</td></tr></table>';
//    return content;   
    var latlng = markers.getPosition();
    var options = setDichVu();
    var html = "<table width='100%' border='0'><tr><td>" +
    "<img class='placeIcon' src='" + place.icon + "'/></td>" +
    "<td><b><a href='" + place.url + "'>" + place.name + "</a></b></td></tr>" +
    "<tr> <td width='35%'>Địa Điểm </td>" +
    " <td width='65%'> <input type='text' id='name'/> </td>  </tr>" + 
    "<tr> <td>Địa Chỉ</td><td> <input type='text' id='address'/></td>" + 
    "</tr> <tr> <td>Miêu Tả </td> <td> <input type='text' id='description' /></td>" + 
    "</tr><tr><td>Dịch Vụ</td><td><form id='form1' name='form1' method='post' action=''>"+
    "<label> <select id='type'>" + options
    
    + "</select></label> </form></td> </tr> <tr>" + 
    "<td></td>" +
    "<td><input type='hidden' id='lat' value=' " + latlng.lat() + "'/>" +
    "<input type='hidden' id='lng' value='" + latlng.lng() + "'/><input name='Thêm' type='button' value='Thêm' onclick='saveDatas()' />" +
    "</td></tr></table>";
    
    return html;
  }